<template>
  <div class="searchheader">
    <div class="searchheader_main">
      <div class="searchheader_main_recommend" v-if="headType === 1">
        <router-link
          :to="{ name: 'SEARCHHISTORY' }"
          :title="this.$t('lang.点击搜索')"
          ><i class="icon-search"></i
          ><span>{{ $t('lang["搜索"]') }}</span></router-link
        >
      </div>
      <div class="searchheader_main_reslut" v-if="headType === 2">
        <div class="searchheader_main_reslut_header">
          <a
            href="javascript:;"
            :title="this.$t('lang.返回上一页')"
            class="goback"
            @click="gobackClickHandle"
            ><i class="icon-arrow-left-bold"></i
          ></a>
          <input
            value=""
            :placeholder="this.$t('lang.搜索')"
            class="searchheader_main_reslut_header_input"
            v-model="searchKey"
            @keyup.enter="searchInputHandle"
          />
        </div>
      </div>
      <div class="searchheader_main_reslut" v-if="headType === 3">
        <div class="searchheader_main_reslut_header">
          <a
            href="javascript:;"
            :title="this.$t('lang.返回上一页')"
            class="goback"
            @click="gobackClickHandle"
            ><i class="icon-arrow-left-bold"></i
          ></a>
          <input
            value=""
            :placeholder="this.$t('lang.搜索关键词')"
            class="searchheader_main_reslut_header_input"
            v-model="searchKey"
            @keyup.enter="searchInputHandle"
            ref="searchHeaderResultInput"
          />
          <!-- <a
            href="javascript:;"
            :title="this.$t('lang.重置')"
            class="clearContent"
            @click="clearContentClickHandle"
            ><i class="icon-close-bold"></i
          ></a> -->
        </div>
      </div>
    </div>
    <SearchHistory
      :searchHistory="defaultSearchHistory"
      :title="this.$t('lang.推荐搜索')"
      v-if="headType === 2"
    ></SearchHistory>
    <SearchHistory
      :searchHistory="searchHistory"
      :title="this.$t('lang.搜索历史')"
      v-if="headType === 2"
    ></SearchHistory>
  </div>
</template>
<script>
export default {
  name: "SearchHeader",
  props: {
    headType: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  components: {
    SearchHistory: () =>
      import(
        /* webpackChunkName: "searchHistory" */ "../../components/search/searchHistory"
      ),
  },
  created() {
    let searchHistory = window.sessionStorage.getItem("searchHistory");
    searchHistory && (this.searchHistory = JSON.parse(searchHistory));
  },
  data() {
    return {
      searchKey: "",
      searchHistory: [],
      defaultSearchHistory: [
        this.$t("lang.旅游"),
        this.$t("lang.家居"),
        this.$t("lang.艺术"),
        this.$t("lang.美食"),
        this.$t("lang.建筑"),
        this.$t("lang.时尚"),
        this.$t("lang.影视"),
      ],
    };
  },
  mounted() {
    document.title = this.$t("lang." + this.$route.meta.title) + " - facebox";
    this.searchKey = this.$route.params.key || "";
  },
  methods: {
    searchInputHandle(e) {
      if (this.searchKey.replace(/^\s+|\s+$/gim, "") !== "") {
        this.searchHistory.push(this.searchKey);
        window.sessionStorage.setItem(
          "searchHistory",
          JSON.stringify(this.searchHistory)
        );
        console.log(this.searchHistory);
        this.$router.push({
          name: "SEARCHRESULT",
          params: { key: this.searchKey },
        });
      }
    },
    clearContentClickHandle(e) {
      this.searchKey = "";
    },
    gobackClickHandle(e) {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.searchheader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 99999;
  background-color: #fff;
  text-align: center;
  min-height: 44 / @base;
  border-bottom: 1 / @base solid #ccc;
  .searchheader_main {
    .searchheader_main_recommend {
      display: block;
      a {
        display: flex;
        padding: 10 / @base 10 / @base 10 / @base 15 / @base;
        i {
          width: 24 / @base;
          height: 24 / @base;
          display: block;
          margin: 0 10 / @base 0 0;
          font-size: 24 / @base;
        }
        span {
          display: block;
          width: 80%;
          color: #999;
          text-align: left;
          margin: 3 / @base 0 0;
        }
      }
    }
    .searchheader_main_reslut {
      .searchheader_main_reslut_header {
        display: flex;
        padding: 10 / @base 10 / @base;
        a {
          &.goback {
            i {
              width: 24 / @base;
              height: 24 / @base;
              display: block;
              margin: 0 10 / @base 0 0;
              font-size: 24 / @base;
            }
          }
          &.clearContent {
            i {
              width: 24 / @base;
              height: 24 / @base;
              display: block;
              margin: 0 10 / @base 0 0;
              font-size: 24 / @base;
            }
          }
        }
        input {
          width: 80%;
          border: 0;
        }
      }
    }
  }
}
</style>
